<!doctype html>
<html lang="zh-CN">
<head>
    <!--必要的meta-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!--main.css-->
    <link rel="stylesheet" href="../style/main.css">
    <title>Lesson管理系统</title>
    <script src="../bootstrap-4.6.2-dist/bootstrap-icons-1.10.5/jquery-3.6.0.js"></script>
    <link rel="stylesheet" href="../bootstrap-4.6.2-dist/bootstrap-icons-1.10.5/css/bootstrap.min.css">
</head>
<body class="bg-dark">
<section class="container-fluid">
    <section class="row">
        <!--页左-->
        <article class="col-sm-2 border-right bg-light p-0">
            <img src="../static/image/落九川.ico" alt="...">
            <h4 class="text-center my-4">Lesson管理系统</h4>
            <div id="left-nav" class="list-group list-group-flush">
                <a href="javascript:void(0);" onclick="show(this,'user/user.html')"
                   class="list-group-item list-group-item-action">
                    <strong><i class="bi bi-person-vcard-fill"></i> 用户管理</strong><br/>
                    <small>User Management</small>
                </a>
                <a href="javascript:void(0);" onclick="show(this,'banner/banner.html')"
                   class="list-group-item list-group-item-action">
                    <strong><i class="bi bi-badge-ad-fill"></i> 广告管理</strong><br/>
                    <small>Banner Management</small>
                </a>
                <a href="javascript:void(0);" onclick="show(this,'video/video.html')"
                   class="list-group-item list-group-item-action">
                    <strong><i class="bi bi-camera-reels-fill"></i> 视频管理</strong><br/>
                    <small>Video Management</small>
                </a>
                <a href="javascript:void(0);" onclick="show(this,'order/order.html')"
                   class="list-group-item list-group-item-action">
                    <strong><i class="bi bi-credit-card-fill"></i> 订单管理</strong><br/>
                    <small>Order Management</small>
                </a>
                <hr/>
            </div>
            <div class="card mt-3" style="border-radius: 0">
                <div class="row no-gutters">
                    <div class="col-md-4">
                        <img src="../static/image/韦晓焕.jpg" alt="..." class="m-1"
                             style="width: 100px;height: 80px">
                    </div>
                    <div class="col-md-8 pl-4">
                        <div class="card-body text-center">
                            <!--用户昵称-->
                            <h5 class="card-title" id="admin-nike-name"></h5>
                            <p class="card-text">信息提示</p>
                        </div>
                    </div>
                </div>
                <button type="button" class="btn btn-danger btn-sm mr-1 mt-2" id="exit">退出登录</button>
            </div>
            <!--版权与功能：样式[上外边距 内容居中]-->
            <small class="text-muted text-center font-italic">&copy;All Right Reserved</small>
        </article>
        <!--页右-->
        <article class="col-sm-10 p-0 small ">
            <!--导航条：样式基础/待展开/暗色/背景色/-->
            <nav class="navbar navbar-expand-lg navbar-light "
                 style="background:linear-gradient(to right, #fbc2eb, #a6c1ee)">
                <!--品牌：样式-->
                <a class="navbar-brand" href="#">LESSON</a>
                <!--折叠按钮：样式[折叠按钮基础]/类别/切换功能/功能目标-->
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent">
                    <!--按钮文字：样式[三条线的图标]-->
                    <span class="navbar-toggler-icon"></span>
                </button>
                <!--折叠的内容/ID/样式[折叠基础 导航条折叠]-->
                <div class="collapse navbar-collapse" id="navbarContent">
                    <!--列表：样式[导航条中的导航 右外边距]-->
                    <ul class="navbar-nav mr-auto">
                        <!--样式[导航项 当前选中]-->
                        <li class="nav-item active">
                            <!--链接，导航中的样式-->
                            <a class="nav-link" href="#"><i class="bi bi-house-door-fill"></i> 首页</a>
                        </li>
                        <!--样式[导航项 -->
                        <li class="nav-item">
                            <!--链接，导航中的样式-->
                            <a class="nav-link" href="#"><i class="bi bi-file-earmark-text-fill"></i> 项目文档</a>
                        </li>
                        <!--样式[导航项 -->
                        <li class="nav-item">
                            <!--链接，导航中的样式-->
                            <a class="nav-link"><i class="bi bi-chat-left-dots-fill"></i> 联系我们</a>
                        </li>
                        <!--样式[导航项 -->
                        <li class="nav-item">
                            <!--链接，导航中的样式-->
                            <a class="nav-link"><i class="bi bi-gear-fill"></i> 系统设置</a>
                        </li>
                        <!--列表项：样式[导航条 下拉菜单]-->
                        <li class="nav-item dropdown">
                            <!--链接：样式[导航中的链接，下拉菜单触发器]，地址，下拉功能-->
                            <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown"
                               aria-expanded="false">
                                <i class="bi bi-box2-heart-fill"></i> 相关产品
                            </a>
                            <!--菜单：样式[下拉菜单中的内容]-->
                            <div class="dropdown-menu">
                                <!--菜单项：样式[菜单项],地址-->
                                <a class="dropdown-item" href="#">Lesson-Document</a>
                                <!--菜单项：样式[菜单项],地址-->
                                <a class="dropdown-item" href="#">Lesson-Admin</a>
                                <!--菜单项：样式[菜单项],地址-->
                                <a class="dropdown-item" href="#">Lesson-User-Background</a>
                                <!--分隔线：[下拉菜单中的分隔线]-->
                                <div class="dropdown-divider"></div>
                                <!--菜单项：样式[菜单项],地址-->
                                <a class="dropdown-item" href="#">Lesson-User-Foreground</a>
                            </div>
                        </li>
                    </ul>
                    <!--表单：样式[内联菜单，上下外边距]-->
                    <form class="form-inline my-2 my-lg-0">
                        <label>
                            <!--搜索框：样式[表单控件 右外边距 小号]，类型，背景字-->
                            <input class="form-control mr-sm-2 form-control-sm" type="search" placeholder="站内搜索">
                        </label>
                        <!--搜索按钮：样式[按钮基础 背景色 上下外边距，小号]，类型，背景字-->
                        <button class="btn btn-outline-warning my-2 my-sm-0 btn-sm" type="submit">搜索</button>
                    </form>
                </div>
            </nav>
            <!--进度条:样式[进度条]-->
            <section class="progress" style="height: 15px; border-radius: 0;">
                <!--进度条：样式[进度条 条纹 动画],宽度100%-->
                <div class="progress-bar bg-primary   progress-bar-striped progress-bar-animated"
                     style="width: 100%">
                    WELCOME
                </div>
            </section>
            <!--帧窗口容器:样式[响应式,16:9响应尺寸]-->
            <section class="embed-responsive embed-responsive-16by9">
                <!--帧窗口：名称，样式[帧窗口项]，默认地址，允许全屏-->
                <iframe name="screen" class="embed-responsive-item" src="banner/board.html"
                        allowfullscreen></iframe>
            </section>
        </article>
    </section>
</section>

<!--JS-->
<script src="../bootstrap-4.6.2-dist/bootstrap-icons-1.10.5/jquery-3.6.0.js"></script>
<script src="../bootstrap-4.6.2-dist/bootstrap-icons-1.10.5/js/bootstrap.bundle.min.js"></script>
<script src="../bootstrap-4.6.2-dist/bootstrap-icons-1.10.5/js/bootstrap.min.js"></script>
<script src="../script/main.js"></script>
</body>
</html>